<!--
 * @Author: badcandy 568197314@qq.com
 * @Date: 2023-02-19 13:52:31
 * @LastEditors: badcandy 568197314@qq.com
 * @LastEditTime: 2023-02-19 19:24:00
 * @FilePath: /dcollege/src/views/schedule/addToDo.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="addToDoBackground">
    <var-app-bar
      color="#fff"
      text-color="#000"
      :elevation="false"
      title="添加日程"
      title-position="center"
    >
      <template #left>
        <var-button color="transparent" text-color="#000" round text>
          <var-icon @click="goBack" name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <div class="addToDoBody">
      <div class="addToDo">
        <var-form ref="todo">
          <var-input
            placeholder="请输入创建的日程标题"
            v-model="toDoData.name"
          ></var-input>
          <var-select
            :line="false"
            placeholder="添加地点"
            v-model="toDoData.location"
          >
            <var-option v-for="item in address" :label="item.label" />
          </var-select>
          <VueDatePicker v-model="STime">
            <template #dp-input="{ value }">
              <input placeholder="添加日程时间" type="text" :value="value" />
            </template>
          </VueDatePicker>
          <VueDatePicker v-model="RTime">
            <template #dp-input="{ value }">
              <input placeholder="添加提醒时间" type="text" :value="value" />
            </template>
          </VueDatePicker>
          <var-input
            placeholder="备注"
            textarea
            v-model="toDoData.comment"
            :line="false"
          ></var-input>
        </var-form>
      </div>
      <!-- 创建日程按钮 -->
      <div class="createBtn">
        <var-button class="todoBtn" block type="primary" @click="createToDo"
          >创建</var-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import address from "./model/adress";
import { ref, reactive } from "vue";
import dayjs from "dayjs";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { addSchedule } from "../../services/schedule";
import { Snackbar } from "@varlet/ui";

const router = useRouter();
const route = useRoute();
const STime = ref(route.query.nowDate as string);
const RTime = ref("");
const toDoData = reactive({
  name: "", // 日程名称
  location: "", // 地点
  scheduleTime: "", //日程时间(当前时间)
  reminderTime: "", //提醒时间
  comment: "", // 备注
});
const todo = ref({});
// 返回上一级
const goBack = () => {
  router.go(-1);
};
// 创建日程
const createToDo = async () => {
  const newSTime = dayjs(STime.value).format("YYYY-MM-DD HH:mm:ss");
  const newRTime = dayjs(RTime.value).format("YYYY-MM-DD HH:mm:ss");
  // 配置传输data
  const data = {
    name: toDoData.name,
    location: toDoData.location,
    scheduleTime: newSTime,
    reminderTime: newRTime,
    comment: toDoData.comment,
  };
  try {
    const res = await addSchedule(data);
    if (res.status === 200) {
      Snackbar.success("创建日程成功");
      router.push({ path: "/schedule" });
    }
  } catch (error) {
    Snackbar.error("创建日程失败" + (error as Error).message);
    console.log((error as Error).message);
  }
};
</script>

<style scoped>
.addToDoBackground {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgb(244, 245, 249);
}
.addToDoBody {
  position: relative;
  padding-top: 0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.addToDo {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 8px 8px 8px 8px;
}
.createBtn {
  position: relative;
  margin-top: 2.5rem;
}
.todoBtn {
  border-radius: 1.25rem;
}
input {
  outline-style: none;
  border: 1px solid #ffffff;
  border-radius: 3px;
  height: 44px;
  width: 300px;
  font-size: 14px;
  font-family: "Microsoft soft";
}
input:focus {
  border-color: #66afe9;
  outline: 0;
}
</style>
